import React, {Component} from "react";
import {
    Space, Button, Table, Row, Col, Input, Modal, Tag,
    Breadcrumb, PageHeader, Form, Checkbox, message, Radio,
    DatePicker
} from "antd";
import moment from 'moment';

import {} from "@ant-design/icons";

const {RangePicker} = DatePicker;

const options = [
    {label: '酒店', value: '1'},
    {label: '线路', value: '2'},
    {label: '门票', value: '3'},
    {label: '租车', value: '4'},
];

import axios from "@src/lib/axios";
import "@src/style/common.scss";

export default class SupAdd extends Component {
    constructor(props) {
        super(props);
        let form = React.createRef();

        this.state = {
            loading: false,
            id: "",
            title: "添加同业机构",
            info: {
                company_name: "",
                address: "",
                contact_member: "",
                mobile: "",
                email: "",
                wx: "",
                if_fee: 2,
                signed_date: [moment(new Date(), "YYYY-MM-DD"), ""],
                company_type: ["1"]
            }
        };
    }

    componentWillMount = () => {
        console.log('组件挂载完成');
        const id = this.props.location.state.id;
        const title = "修改同业机构信息"
        if (id) {
            let info = this.props.location.state.info;
            let {signed_start, signed_end, company_type} = info
            info.signed_date = [moment(signed_start), moment(signed_end)]
            info.company_type = company_type.split(',')

            this.setState({id, info, title})
        } else {
            this.setState({
                id: 0, info: {}
            })
        }
    }
    //提交表单 验证成功后回调事件
    onFinish = values => {
        console.log("success:", values);

        let {id, info, loading} = this.state
        this.state.loading = true

        let {signed_date} = values;

        signed_date = signed_date.filter(function (s) {
            return s && s.format().trim();
        });
        if (signed_date.length !== 2) {
            message.warning("签约日期未填写");
            return;
        }
        signed_date[0] = signed_date[0].format('YYYY-MM-DD');
        signed_date[1] = signed_date[1].format('YYYY-MM-DD');
        values.signed_date = signed_date;


        if (!id) {
            values.type=2;
            axios.post("/platform/company/trade/create", values).then(res => {
                if (res.code === 0) {
                    message.success(res.msg)
                    this.props.history.push("/company/trade");
                } else {
                    message.warning(res.msg);
                }
            });
        } else {
            Object.assign(values,id)
            axios.post("/platform/company/trade/update", values).then(res => {
                if (res.code === 0) {
                    message.success(res.msg)
                    this.props.history.push("/company/trade");
                } else {
                    message.warning(res.msg);
                }
            });
        }
    }
    onFinishFailed = errorInfo => {
        console.log("failed:", errorInfo);
    }
    radioOnchange = (e) => {
        //e.target.value
    }

    onCompanyTypeChange = (checkedValues) => {
        console.log('checked = :', checkedValues);
    }

    render() {
        let {info, id, loading} = this.state;
        return (
            <div style={{padding: "0 15px 100px 15px", background: "#fff"}}>
                <div style={{padding: "10px 0px 1px 0px"}}>
                    <Breadcrumb>
                        <Breadcrumb.Item>用户管理</Breadcrumb.Item>
                        <Breadcrumb.Item>

                            <Button type="link" onClick={() => {
                                this.props.history.push('/company/trade')
                            }}>
                                同业列表
                            </Button>
                        </Breadcrumb.Item>
                        <Breadcrumb.Item>{this.state.title}</Breadcrumb.Item>
                    </Breadcrumb>
                </div>
                <PageHeader
                    className="site-page-header"
                    title="同业列表"
                    subTitle={this.state.title}
                />
                <Form
                    ref={this.form}
                    name="basic"
                    initialValues={info}
                    onFinish={this.onFinish}
                    onFinishFailed={this.onFinishFailed}
                    labelCol={{span: 3}}
                    wrapperCol={{span: 20}}
                >
                    <Form.Item
                        label={"机构名称"}
                        name={"company_name"}
                        rules={[{required: true, message: '机构名称不能为空'}]}
                    >
                        <Input/>
                    </Form.Item>
                    <Form.Item
                        label={"常驻所在地址"}
                        name={"address"}
                        rules={[{required: true, message: "常驻所在地不能为空"}]}
                    >
                        <Input/>
                    </Form.Item>
                    <Form.Item
                        label={"联系人姓名"}
                        name={"contact_member"}
                        rules={[{required: true, message: "联系人姓名"}]}
                    >
                        <Input/>
                    </Form.Item>
                    <Form.Item
                        label={"联系人手机号"}
                        name={"mobile"}
                        rules={[{required: true, message: "联系人手机号不能为空"}]}
                    >
                        <Input/>
                    </Form.Item>
                    <Form.Item
                        label={"邮箱"}
                        name={"email"}
                    >
                        <Input/>
                    </Form.Item>
                    <Form.Item
                        label={"微信"}
                        name={"wx"}
                    >
                        <Input/>
                    </Form.Item>

                    <Form.Item
                        label={"是否缴纳保证金"}
                        name={"if_fee"}
                        rules={[{required: true, message: "是否缴纳了保证金?"}]}
                    >
                        <Radio.Group onChange={this.radioOnchange} value={this.state.info.if_fee}>
                            <Radio value={1}>是</Radio>
                            <Radio value={2}>否</Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item
                        label={"签约日期"}
                        name={"signed_date"}
                        rules={[{required: true, message: "签约日期(开始)不能为空"}]}
                    >
                        <RangePicker format="YYYY-MM-DD" allowClear={true}/>
                    </Form.Item>
                    <Form.Item
                        label={"业务范畴"}
                        name={"company_type"}
                        rules={[{required: true, message: "业务范畴必选"}]}
                    >
                        <Checkbox.Group options={options} onChange={this.onCompanyTypeChange}/>
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit" loading={loading}>提交审核</Button>
                    </Form.Item>
                </Form>


            </div>
        )
    }
}

